<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
		<meta name="author" content="金西振" />
		<title></title>
		<style></style>
	</head>
	<body>
		<button id="btn1" class="btn1">按钮1</button>
		<button id="btn2">
			<span style="background-color: red">xxxxx</span>
			按钮2
		</button>

		<script>
			var btn1 = document.getElementById('btn1');
			var btn2 = document.getElementById('btn2');

			// addEventListener(eventType, callback)
			// removeEventListener(eventType, callback)
			// eventType 事件名，不带on前缀，比如：click、mousedown
			// callback: 事件函数
			// 添加事件有两种写法：
			// 写法一：先声明函数，然后把函数放在参数2的位置
			// 写法二：直接在参数2的位置写一个函数

      // 两种写法区别：只有写法一添加事件才能使用removeEventListener
      // 原因：绑定事件和移除事件，事件函数必须是同一个函数，写法一用的都是同一个函数对象，写法二相当于创建了两个函数对象，这两个函数对象不是

			function login(ev) {
				console.log(1, ev.target);
				console.log(1, this);
			}

			// 写法一：
			btn1.addEventListener('click', login);
			// btn1.addEventListener('mouseover', login);

			btn1.removeEventListener('click', login);

			// 写法二：
			btn2.addEventListener('click', function (ev) {
				console.log('2', ev.target);
				console.log('2', this);
			});
			btn2.removeEventListener('click', function (ev) {
				console.log('2', ev.target);
				console.log('2', this);
			});

      
		</script>
	</body>
</html>
